<template>
  <div>
    <el-form :model="data" size="small" label-width="100px">
      <el-form-item prop="cover">
        <template slot-scope="scope">
          <el-image
            fit="cover"
            shape="square"
            :src="data.cover">
          </el-image>
        </template>
      </el-form-item>
      <el-form-item label="课程名称：" prop="title">
        <el-input readonly v-model="data.title" placeholder="请输入课程名称" />
      </el-form-item>
      <el-form-item label="课程分类：" prop="subjectId">
        <el-select disabled v-model="data.subjectId" style="width: 100%">
          <el-option v-for="(subject,index) in subjectList" :value="subject.id" :label="subject.title" :key="subject.id">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item v-model="data.status" label="审核状态：" prop="status">
        <el-tag v-if="data.status===0" type="success" size="small">草稿</el-tag>
        <el-tag v-if="data.status===1" type="danger" size="small">审核中</el-tag>
        <el-tag v-if="data.status===2" type="warning" size="small">已发表</el-tag>
      </el-form-item>
      <el-form-item v-model="data.required" label="必/选修：" prop="status">
        <el-tag v-if="data.required===0" type="primary" size="small">必修</el-tag>
        <el-tag v-if="data.required===1" type="success" size="small">选修</el-tag>
      </el-form-item>
      <el-form-item label="课时：" prop="lessonNum">
        <el-input-number disabled :controls="false" v-model="data.lessonNum" style="width: 160px" />
      </el-form-item>
      <el-form :model="data" :inline="true" size="small" label-width="100px">
      </el-form>
      <el-form-item label="课程简介：" prop="intro" class="block">
        <el-input readonly
          v-model="data.description"
          :rows="7"
          type="textarea"
          maxlength="1023"
          show-word-limit
        />
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import axios from "axios";
export default {
  name: "course_detail",
  data() {
    return {
      data: {
        id: 0,
        cover:'',
        title: '',
        lessonNum:'',
        description: '',
        subjectId: null
      },
      subjectList:[],
    }
  },
  created() {
    this.getSubject()
  },
  methods: {
    setData(data) {
      let jwtToken = localStorage.getItem('jwtToken');
      axios.get('/api/course/queryCourseById',
        {
          params:{
            id:data.id
          },
          headers:{jwtToken:jwtToken}
        }).then(result =>{

        if(result.data.code === 200){
          this.data = result.data.data;
        }
      }).catch(e => {
        this.$message({
          showClose: true,
          message: '服务器去火星了!',
          type: 'error',
          duration: 2000
        });
      })
    },
    getData() {
      return this.data
    },
    getSubject() {
      let jwtToken = localStorage.getItem('jwtToken');
      axios.get('/api/subject/subjectList',
        {params:{},headers:{jwtToken:jwtToken}}
      )
        .then(result=>{
          if(result.data.code===200){
            this.subjectList = result.data.data;
          }
        }).catch(e=>{
        this.$message({
          showClose: true,
          message: '服务器去火星了!',
          type: 'error',
          duration: 2000
        });
      })
    },
  }
}
</script>

<style lang="scss" scoped>
.block {
  display: block;
}

.inliblock {
  display: inline-block;
}

.cover-img {
  width: 360px;
  height: 120px;
  background-color: #f5f7fa;
  line-height: 120px;
}

</style>
